<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,minimal-ui" />
  <title>echarts图表报表</title>
  <link rel="stylesheet" href="css/charts_demo.css">
  <script src="js/vuejs-2.5.16.js"></script>
  <script src="js/axios-0.18.0.js"></script>
  <script src="js/echarts.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=UzpZ9A94pysSfj013URfjCfeUKjMv52F"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
</head>
<body>
<div id="app" class="my-box">
  <div class="my-box-left">
    <button @click="columnCharts">统计各部门人数</button> <br/> <br/>
    <button @click="lineCharts">月份入职人数统计</button> <br/> <br/>
    <button @click="pieCharts">员工地方来源统计</button> <br/> <br/>
    <button @click="mapCharts">员工地方来源统计(地图)</button> <br/> <br/>
  </div>
  <div class="my-box-right">
    <div id="container" style="height:450px;"></div>
  </div>
</div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{},
    methods: {
      columnCharts() {
        axios.get("/stat/columnCharts").then(res=> {
          let datas = res.data;
        let titles = [];  //x轴上显示的数据
        let values = []; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
          titles[i] = datas[i].deptName;
          values[i] = datas[i].num;
        }
        var myChart = echarts.init(document.getElementById("container"));
        //toolbox 为下载图片
        option = {
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: titles
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: values,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        };
        myChart.clear();
        myChart.setOption(option);
      });
      },
      lineCharts(){
        axios.get("/stat/lineCharts").then(res=>{
          let datas = res.data;
        let titles=[];  //x轴上显示的数据
        let values=[]; //y轴上显示的数据
        for (let i = 0; i < datas.length; i++) {
          titles[i] = datas[i].name;
          values[i] = datas[i].num;
        }

        var myChart = echarts.init(document.getElementById('container'));
//保存图片参考https://blog.csdn.net/qq_38974638/article/details/107255989
          option = {
            toolbox: {
              feature: {
                saveAsImage: {
                  name: "月份入职人数统计折线图"
                }
              }
            },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: values,
            type: 'line'
          }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
      })
      },
      pieCharts(){
        axios.get("/stat/pieECharts").then(res=>{
          let datas = res.data;
        // 需要三种数据：都可以从datas中获取
        //  1、省份数据 [{name:"河北省",value:10}]
        // 2、城市数据 [{name:"石家庄",value:3}]
        // 3、城市的名称
        let provinceData =  datas.province;
        let cityData = datas.city;
        let cityNames = [];
        for (let i = 0; i < cityData.length; i++) {
          cityNames[i] = cityData[i].name;
        }


        var myChart = echarts.init(document.getElementById('container'));

        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: cityNames
          },
          series: [
            {
              name: '员工来源',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: provinceData
            },
            {
              name: '员工来源',
              type: 'pie',
              radius: ['40%', '55%'],
              label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#eee',
                borderColor: '#aaa',
                borderWidth: 1,
                borderRadius: 4,
                // shadowBlur:3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                // shadowColor: '#999',
                // padding: [0, 7],
                rich: {
                  a: {
                    color: '#999',
                    lineHeight: 22,
                    align: 'center'
                  },
                  // abg: {
                  //     backgroundColor: '#333',
                  //     width: '100%',
                  //     align: 'right',
                  //     height: 22,
                  //     borderRadius: [4, 4, 0, 0]
                  // },
                  hr: {
                    borderColor: '#aaa',
                    width: '100%',
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 16,
                    lineHeight: 33
                  },
                  per: {
                    color: '#eee',
                    backgroundColor: '#334455',
                    padding: [2, 4],
                    borderRadius: 2
                  }
                }
              },
              data: cityData
            }
          ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
      })
      },
      mapCharts(){
        axios.get("/stat/pieECharts").then(res=>{
          var myChart = echarts.init(document.getElementById('container'));

        var data = res.data.city;
        for (let i = 0; i < data.length; i++) {
          data[i].name = data[i].name.substring(0,data[i].name.length-1);
          data[i].value = data[i].value;
        }

        var geoCoordMap = {
          '海门':[121.15,31.89],
          '鄂尔多斯':[109.781327,39.608266],
          '招远':[120.38,37.35],
          '舟山':[122.207216,29.985295],
          '齐齐哈尔':[123.97,47.33],
          '盐城':[120.13,33.38],
          '赤峰':[118.87,42.28],
          '青岛':[120.33,36.07],
          '乳山':[121.52,36.89],
          '金昌':[102.188043,38.520089],
          '泉州':[118.58,24.93],
          '莱西':[120.53,36.86],
          '日照':[119.46,35.42],
          '胶南':[119.97,35.88],
          '南通':[121.05,32.08],
          '拉萨':[91.11,29.97],
          '云浮':[112.02,22.93],
          '梅州':[116.1,24.55],
          '文登':[122.05,37.2],
          '上海':[121.48,31.22],
          '攀枝花':[101.718637,26.582347],
          '威海':[122.1,37.5],
          '承德':[117.93,40.97],
          '厦门':[118.1,24.46],
          '汕尾':[115.375279,22.786211],
          '潮州':[116.63,23.68],
          '丹东':[124.37,40.13],
          '太仓':[121.1,31.45],
          '曲靖':[103.79,25.51],
          '烟台':[121.39,37.52],
          '福州':[119.3,26.08],
          '瓦房店':[121.979603,39.627114],
          '即墨':[120.45,36.38],
          '抚顺':[123.97,41.97],
          '玉溪':[102.52,24.35],
          '张家口':[114.87,40.82],
          '阳泉':[113.57,37.85],
          '莱州':[119.942327,37.177017],
          '湖州':[120.1,30.86],
          '汕头':[116.69,23.39],
          '昆山':[120.95,31.39],
          '宁波':[121.56,29.86],
          '湛江':[110.359377,21.270708],
          '揭阳':[116.35,23.55],
          '荣成':[122.41,37.16],
          '连云港':[119.16,34.59],
          '葫芦岛':[120.836932,40.711052],
          '常熟':[120.74,31.64],
          '东莞':[113.75,23.04],
          '河源':[114.68,23.73],
          '淮安':[119.15,33.5],
          '泰州':[119.9,32.49],
          '南宁':[108.33,22.84],
          '营口':[122.18,40.65],
          '惠州':[114.4,23.09],
          '江阴':[120.26,31.91],
          '蓬莱':[120.75,37.8],
          '韶关':[113.62,24.84],
          '嘉峪关':[98.289152,39.77313],
          '广州':[113.23,23.16],
          '延安':[109.47,36.6],
          '太原':[112.53,37.87],
          '清远':[113.01,23.7],
          '中山':[113.38,22.52],
          '昆明':[102.73,25.04],
          '寿光':[118.73,36.86],
          '盘锦':[122.070714,41.119997],
          '长治':[113.08,36.18],
          '深圳':[114.07,22.62],
          '珠海':[113.52,22.3],
          '宿迁':[118.3,33.96],
          '咸阳':[108.72,34.36],
          '铜川':[109.11,35.09],
          '平度':[119.97,36.77],
          '佛山':[113.11,23.05],
          '海口':[110.35,20.02],
          '江门':[113.06,22.61],
          '章丘':[117.53,36.72],
          '肇庆':[112.44,23.05],
          '大连':[121.62,38.92],
          '临汾':[111.5,36.08],
          '吴江':[120.63,31.16],
          '石嘴山':[106.39,39.04],
          '沈阳':[123.38,41.8],
          '苏州':[120.62,31.32],
          '茂名':[110.88,21.68],
          '嘉兴':[120.76,30.77],
          '长春':[125.35,43.88],
          '胶州':[120.03336,36.264622],
          '银川':[106.27,38.47],
          '张家港':[120.555821,31.875428],
          '三门峡':[111.19,34.76],
          '锦州':[121.15,41.13],
          '南昌':[115.89,28.68],
          '柳州':[109.4,24.33],
          '三亚':[109.511909,18.252847],
          '自贡':[104.778442,29.33903],
          '吉林':[126.57,43.87],
          '阳江':[111.95,21.85],
          '泸州':[105.39,28.91],
          '西宁':[101.74,36.56],
          '宜宾':[104.56,29.77],
          '呼和浩特':[111.65,40.82],
          '成都':[104.06,30.67],
          '大同':[113.3,40.12],
          '镇江':[119.44,32.2],
          '桂林':[110.28,25.29],
          '张家界':[110.479191,29.117096],
          '宜兴':[119.82,31.36],
          '北海':[109.12,21.49],
          '西安':[108.95,34.27],
          '金坛':[119.56,31.74],
          '东营':[118.49,37.46],
          '牡丹江':[129.58,44.6],
          '遵义':[106.9,27.7],
          '绍兴':[120.58,30.01],
          '扬州':[119.42,32.39],
          '常州':[119.95,31.79],
          '潍坊':[119.1,36.62],
          '重庆':[106.54,29.59],
          '台州':[121.420757,28.656386],
          '南京':[118.78,32.04],
          '滨州':[118.03,37.36],
          '贵阳':[106.71,26.57],
          '无锡':[120.29,31.59],
          '本溪':[123.73,41.3],
          '克拉玛依':[84.77,45.59],
          '渭南':[109.5,34.52],
          '马鞍山':[118.48,31.56],
          '宝鸡':[107.15,34.38],
          '焦作':[113.21,35.24],
          '句容':[119.16,31.95],
          '北京':[116.46,39.92],
          '徐州':[117.2,34.26],
          '衡水':[115.72,37.72],
          '包头':[110,40.58],
          '绵阳':[104.73,31.48],
          '乌鲁木齐':[87.68,43.77],
          '枣庄':[117.57,34.86],
          '杭州':[120.19,30.26],
          '淄博':[118.05,36.78],
          '鞍山':[122.85,41.12],
          '溧阳':[119.48,31.43],
          '库尔勒':[86.06,41.68],
          '安阳':[114.35,36.1],
          '开封':[114.35,34.79],
          '济南':[117,36.65],
          '德阳':[104.37,31.13],
          '温州':[120.65,28.01],
          '九江':[115.97,29.71],
          '邯郸':[114.47,36.6],
          '临安':[119.72,30.23],
          '兰州':[103.73,36.03],
          '沧州':[116.83,38.33],
          '临沂':[118.35,35.05],
          '南充':[106.110698,30.837793],
          '天津':[117.2,39.13],
          '富阳':[119.95,30.07],
          '泰安':[117.13,36.18],
          '诸暨':[120.23,29.71],
          '郑州':[113.65,34.76],
          '哈尔滨':[126.63,45.75],
          '聊城':[115.97,36.45],
          '芜湖':[118.38,31.33],
          '唐山':[118.02,39.63],
          '平顶山':[113.29,33.75],
          '邢台':[114.48,37.05],
          '德州':[116.29,37.45],
          '济宁':[116.59,35.38],
          '荆州':[112.239741,30.335165],
          '宜昌':[111.3,30.7],
          '义乌':[120.06,29.32],
          '丽水':[119.92,28.45],
          '洛阳':[112.44,34.7],
          '秦皇岛':[119.57,39.95],
          '株洲':[113.16,27.83],
          '石家庄':[114.48,38.03],
          '莱芜':[117.67,36.19],
          '常德':[111.69,29.05],
          '保定':[115.48,38.85],
          '湘潭':[112.91,27.87],
          '金华':[119.64,29.12],
          '岳阳':[113.09,29.37],
          '长沙':[113,28.21],
          '衢州':[118.88,28.97],
          '廊坊':[116.7,39.53],
          '菏泽':[115.480656,35.23375],
          '合肥':[117.27,31.86],
          '武汉':[114.31,30.52],
          '大庆':[125.03,46.58]
        };

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };

        /* function renderItem(params, api) {
                        var coords = [
                            [116.7,39.53],
                            [103.73,36.03],
                            [112.91,27.87],
                            [120.65,28.01],
                            [119.57,39.95]
                        ];
                        var points = [];
                        for (var i = 0; i < coords.length; i++) {
                            points.push(api.coord(coords[i]));
                        }
                        var color = api.visual('color');

                        return {
                            type: 'polygon',
                            shape: {
                                points: echarts.graphic.clipPointsByRect(points, {
                                    x: params.coordSys.x,
                                    y: params.coordSys.y,
                                    width: params.coordSys.width,
                                    height: params.coordSys.height
                                })
                            },
                            style: api.style({
                                fill: color,
                                stroke: echarts.color.lift(color)
                            })
                        };
                    }*/

        option = {
          backgroundColor: 'transparent',
          title: {
            text: '公司员工来源',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip : {
            trigger: 'item'
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  "featureType": "water",
                  "elementType": "all",
                  "stylers": {
                    "color": "#044161"
                  }
                },
                {
                  "featureType": "land",
                  "elementType": "all",
                  "stylers": {
                    "color": "#004981"
                  }
                },
                {
                  "featureType": "boundary",
                  "elementType": "geometry",
                  "stylers": {
                    "color": "#064f85"
                  }
                },
                {
                  "featureType": "railway",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "highway",
                  "elementType": "geometry",
                  "stylers": {
                    "color": "#004981"
                  }
                },
                {
                  "featureType": "highway",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#005b96",
                    "lightness": 1
                  }
                },
                {
                  "featureType": "highway",
                  "elementType": "labels",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "arterial",
                  "elementType": "geometry",
                  "stylers": {
                    "color": "#004981"
                  }
                },
                {
                  "featureType": "arterial",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#00508b"
                  }
                },
                {
                  "featureType": "poi",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "green",
                  "elementType": "all",
                  "stylers": {
                    "color": "#056197",
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "subway",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "manmade",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "local",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "arterial",
                  "elementType": "labels",
                  "stylers": {
                    "visibility": "off"
                  }
                },
                {
                  "featureType": "boundary",
                  "elementType": "geometry.fill",
                  "stylers": {
                    "color": "#029fd4"
                  }
                },
                {
                  "featureType": "building",
                  "elementType": "all",
                  "stylers": {
                    "color": "#1a5787"
                  }
                },
                {
                  "featureType": "label",
                  "elementType": "all",
                  "stylers": {
                    "visibility": "off"
                  }
                }
              ]
            }
          },
          series : [
            {
              name: '人员',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] * 100;//数据太小了，为了能显示 把符号扩大了100倍
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              itemStyle: {
                color: '#ddb926'
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 6)),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              showEffectOn: 'emphasis',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              itemStyle: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              },
              zlevel: 1
            },
            {
              type: 'custom',
              coordinateSystem: 'bmap',
              // renderItem: renderItem,
              itemStyle: {
                opacity: 0.5
              },
              animation: false,
              silent: true,
              data: [0],
              z: -10
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.clear();
        myChart.setOption(option);
      })
      }
    }
  });
</script>
</html>